<template>
  <div>
    <Dropdown style="margin-left: 850px" @on-click="selectWeather">
      <Button type="primary" style="margin-left: 300px; ">
        请选择天气:{{this.name}}
        <Icon type="ios-arrow-down"></Icon>
      </Button>
      <DropdownMenu slot="list" style="">
        <DropdownItem weather="0">晴天</DropdownItem>
        <DropdownItem weather="2">阴天</DropdownItem>
        <DropdownItem weather="3">下雨</DropdownItem>
      </DropdownMenu>
    </Dropdown>
    <Dropdown style="margin-left: 850px" @on-click="selectDay">
      <Button type="primary" style="margin-left: 300px; ">
        请选择节假日:{{this.name}}
        <Icon type="ios-arrow-down"></Icon>
      </Button>
      <DropdownMenu slot="list" style="">
        <DropdownItem day="0">平时</DropdownItem>
        <DropdownItem day="4">五一</DropdownItem>
        <DropdownItem day="5">十一</DropdownItem>
        <DropdownItem day="6">中秋</DropdownItem>
        <DropdownItem day="7">端午</DropdownItem>
      </DropdownMenu>
    </Dropdown>
    <Button type="primary" @click="submit">提交</Button>
    <div id="lineChart" style="height: 700px; width: 600px"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'index',
  data () {
    return {
      weather: 1,
      day: 1,
      num: []
    }
  },
  mounted () {
    this.lineChart()
  },
  methods: {
    lineChart () {
      let lineGraph = echarts.init(document.getElementById('lineChart'))
      lineGraph.setOption({
        title: {
          text: '所有站台各时段流量图',
          subtext: '',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        xAxis: {
          type: 'category',
          data: ['出站', '入站']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [this.num,this.num],
            type: 'bar'
          }
        ]
      })
    },
    selectWeather (weather) {
      this.weather = weather
      this.num = []
    },
    selectDay (day) {
      this.day = day
      this.num = []

    },
    submit () {
      var day = this.day
      var weather = this.weather
      if ((day + weather) == 0) {
        for (var i = 0; i<2; i++) {
          this.num = this.selectfrom(5000,6500)
        }
        this.lineChart()
      }else {
        for (var i = 0; i<2; i++) {
          this.num = this.selectfrom(2550,6000)
        }
        this.lineChart()
      }
    },
    selectfrom(lowValue,highValue){
      var choice=highValue-lowValue+1;
      return Math.floor(Math.random()*choice+lowValue);
    }
  }
}
</script>

<style scoped>

</style>
